{% macro render_tree(nodes, current_path) %}
    <ul>
        {% for node in nodes %}
            <li class="{% if node.path == current_path or current_path.startswith(node.path + '/') %}open{% endif %} {% if node.path == current_path %}active{% endif %}">
                <span class="toggle">{% if node.children %}▶{% endif %}</span>
                <a href="{{ url_for('index', subpath=node.path) }}">
                    <span class="file-icon">📁</span>{{ node.name }}
                </a>
                {% if node.children %}
                    <div class="subtree">
                        {{ render_tree(node.children, current_path) }}
                    </div>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endmacro %}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件共享</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="main-container">
        <!-- 左侧文件树 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h3>文件导航</h3>
            </div>
            <div class="tree-view">
                <a href="{{ url_for('index') }}" class="tree-root {% if not current_path %}active{% endif %}">
                    <span class="file-icon">🗂️</span> 主目录
                </a>
                {{ render_tree(dir_tree, current_path) }}
            </div>
        </aside>

        <!-- 中间内容区 -->
        <main class="content">
            <header class="content-header">
                <div class="breadcrumbs">
                     <a href="{{ url_for('index') }}" class="home-btn">主目录</a>
                     {% for part in current_path.split('/') if part %}
                        / <a href="{{ url_for('index', subpath=current_path.split(part)[0] + part) }}">{{ part }}</a>
                     {% endfor %}
                </div>
                 <div class="header-actions">
                    <button id="upload-btn" class="btn btn-primary">上传文件</button>
                    <div class="user-info">
                        <span>欢迎, {{ session.username }}!</span>
                        <a href="{{ url_for('logout') }}" class="btn btn-secondary">登出</a>
                    </div>
                </div>
            </header>
            
            <div class="file-browser">
                <table>
                    <thead>
                        <tr>
                            <th>文件名</th>
                            <th>修改时间</th>
                            <th>大小</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in items %}
                        <tr class="file-item" data-path="{{ item.path }}" data-is-folder="{{ 'true' if item.is_folder else 'false' }}">
                            <td data-label="文件名">
                                {% if item.is_folder %}
                                    <a href="{{ url_for('index', subpath=item.path) }}">
                                        <span class="file-icon">📁</span>{{ item.name }}
                                    </a>
                                {% else %}
                                    <span class="file-icon">📄</span>{{ item.name }}
                                {% endif %}
                            </td>
                            <td data-label="修改时间">{{ item.mtime }}</td>
                            <td data-label="大小">{{ item.size }}</td>
                        </tr>
                        {% endfor %}
                        {% if not items %}
                        <tr>
                            <td colspan="3" class="empty-folder">目录为空</td>
                        </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </main>

        <!-- 右侧详情区 -->
        <aside class="details-pane">
            <div id="details-content">
                <p class="placeholder">请选择一个文件或文件夹查看详情</p>
            </div>
        </aside>
    </div>
    
    <!-- 上传模态框 -->
    <div id="upload-modal" class="modal-overlay" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2>上传文件到 /{{ current_path }}</h2>
                <button id="close-modal" class="close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <form method="post" enctype="multipart/form-data" action="{{ url_for('upload_file', subpath=current_path) }}" class="upload-form">
                    <div class="form-group">
                        <input type="file" name="file" id="file" required multiple>
                        <label for="file" class="file-input-label">
                            <span class="btn btn-secondary">选择文件</span>
                            <span id="file-chosen">未选择文件</span>
                        </label>
                    </div>
                    <div id="upload-preview"></div>
                    <button type="submit" class="btn btn-primary">确认上传</button>
                </form>
            </div>
        </div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const fileItems = document.querySelectorAll('.file-item');
        const detailsContent = document.getElementById('details-content');

        fileItems.forEach(item => {
            item.addEventListener('click', function () {
                // 移除其他项的选中状态
                fileItems.forEach(i => i.classList.remove('selected'));
                // 添加当前项的选中状态
                this.classList.add('selected');

                const path = this.dataset.path;
                fetch(`/details/${path}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.error) {
                            detailsContent.innerHTML = `<p class="error">${data.error}</p>`;
                            return;
                        }

                        let html = `
                            <div class="details-header">
                                <span class="file-icon">${data.is_folder ? '📁' : '📄'}</span>
                                <h3>${data.name}</h3>
                            </div>
                            <div class="details-body">
                                <p><strong>修改时间:</strong> ${data.mtime}</p>
                                <p><strong>大小:</strong> ${data.size}</p>`;
                        
                        if (data.is_folder) {
                            html += `<p><strong>内容:</strong> ${data.file_count} 文件, ${data.folder_count} 文件夹</p>`;
                        } else {
                             html += `<a href="/download/${path}" class="btn btn-primary">下载文件</a>`
                        }
                        
                        html += `
                                <div class="qr-code">
                                    <img src="${data.qr_url}" alt="QR Code">
                                    <p>扫描二维码分享</p>
                                </div>
                            </div>`;
                        
                        detailsContent.innerHTML = html;
                    })
                    .catch(error => {
                        console.error('Error fetching details:', error);
                        detailsContent.innerHTML = `<p class="error">加载详情失败</p>`;
                    });
            });
        });
    });

    // --- 文件树交互 ---
    document.querySelectorAll('.tree-view .toggle').forEach(toggle => {
        toggle.addEventListener('click', function() {
            this.parentElement.classList.toggle('open');
        });
    });

    // --- 上传模态框交互 ---
    const uploadBtn = document.getElementById('upload-btn');
    const modal = document.getElementById('upload-modal');
    const closeModal = document.getElementById('close-modal');

    uploadBtn.addEventListener('click', () => modal.style.display = 'flex');
    closeModal.addEventListener('click', () => modal.style.display = 'none');
    window.addEventListener('click', (event) => {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    });

    const fileInput = document.getElementById('file');
    const fileChosen = document.getElementById('file-chosen');
    const uploadPreview = document.getElementById('upload-preview');

    fileInput.addEventListener('change', function(){
        if (this.files.length > 0) {
            fileChosen.textContent = `${this.files.length} 个文件已选择`;
            uploadPreview.innerHTML = '<ul>' + [...this.files].map(f => `<li>${f.name}</li>`).join('') + '</ul>';
        } else {
            fileChosen.textContent = '未选择文件';
            uploadPreview.innerHTML = '';
        }
    });
    </script>
</body>
</html> 